/**
 * Created by zhulizhe on 2017/8/24.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    Platform
} from 'react-native';
import {observable, action, computed, observe} from 'mobx'
import {observer} from 'mobx-react/native'
import LinearGradient from 'react-native-linear-gradient';
import Ionicons from 'react-native-vector-icons/Ionicons';

const ImageW = 220 / 2;
const ImageH = 96 / 2;

export const Button = () => {
    let mode = Platform.os == 'ios' ? 'repeat' : 'cover';
    return <Image
        resizeMode={mode}
        source={require('../../asserts/btn_bg_red.png')}
        style={{
            width: ImageW,
            height: ImageH
        }}/>
}


export const GradientButton = ({title = '', colors = ['#14c2fc', '#399cfc'], onPress, round = true}) => {
    return <TouchableOpacity
        activeOpacity={0.9}
        style={{flex: 1}} onPress={onPress}>
        <LinearGradient
            start={{x: 0.0, y: 0.0}} end={{x: 1.0, y: 1.0}}
            colors={colors}
            style={[styles.linearGradient, {borderRadius: round ? 5 : 0}]}>
            <Text style={styles.buttonText}>{title}</Text>
        </LinearGradient>
    </TouchableOpacity>

}

export const GradientRadiusButton = ({
                                         title = '', colors = ['#14c2fc', '#399cfc'], onPress = () => {
    }, style = styles.radiuslinearGradient, textStyle = styles.radiusbuttonText
                                     }) => {
    return <LinearGradient colors={colors} style={[style]}>
        <TouchableOpacity onPress={onPress} activeOpacity={1}
        >
            <Text style={textStyle}>
                {title}
            </Text>
        </TouchableOpacity>
    </LinearGradient>
};
export const GradientRadiusCartButton = ({
                                             title = '', colors = ['#14c2fc', '#399cfc'], onPress = () => {
    }, style = styles.radiuslinearGradient, textStyle = styles.radiusbuttonText
                                         }) => {
    return <LinearGradient colors={colors} style={[style]}>
        <TouchableOpacity onPress={onPress} style={{flexDirection: 'row'}}>
            <Ionicons name="ios-cart-outline" color="#fff" size={18}/>
            <Text style={textStyle}>
                {title}
            </Text>
        </TouchableOpacity>
    </LinearGradient>
};

// r半径
export const GradienCircle = ({title='',colors=['#ff680f', '#ff2d2d'],r=30})=>{
    return <LinearGradient
        colors={colors}
        style={{
            width:r,
            height:r,
            borderRadius:r/2,
            alignItems:'center',
            justifyContent:'center'
        }}>
        <Text
            style={{
                backgroundColor:'#00000000',
                color:'#fff',
                fontSize:10
            }}>
            {title}</Text>
    </LinearGradient>
}

const styles = {
    linearGradient: {
        flex: 1,
        paddingLeft: 15,
        paddingRight: 15,
        justifyContent: 'center',
        alignItems: 'center'
    },
    buttonText: {
        fontSize: 16,
        backgroundColor: '#00000000',
        color: '#fff',
        justifyContent: 'center',
        alignItems: 'center'
    },
    radiuslinearGradient: {
        borderRadius: 15,
        paddingHorizontal: 8,
        paddingVertical: 6
    },
    radiusbuttonText: {
        fontSize: 13,
        color: '#fff',
        alignSelf: 'center'
    }
};